<template>
	<el-dialog :title="title" v-model="dialogVisible" class="redius8" width="845" center :before-close="handleClose">
		<el-scrollbar style="height: 400px;">
			<el-form :model="form" :rules="rules" ref="queryRef" :inline="true" label-width="106px">
				<div class="bgWhite radius8 pb30">
					<div class="p20">
						<div class="fb fs16 color333 mb20 pl10">
							基础信息
						</div>
						<el-form-item label="作物名称" prop="cropName">
							<el-input size="large" :disabled="disabled" v-model="form.cropName" style="width: 248px" placeholder="请填写" />
						</el-form-item>
						<el-form-item label="作物编码" prop="cropCode">
							<el-input size="large" :disabled="disabled" v-model="form.cropCode" style="width: 248px" placeholder="请填写" />
						</el-form-item>
						<el-form-item label="作物类别" prop="cropCategory">
							<el-select  :disabled="disabled" v-model="form.cropCategory" placeholder="请选择" size="large" style="width: 248px">
								<el-option v-for="dict in bus_crop_category" :key="dict.value" :label="dict.label"
									:value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="常见靶标" prop="commonTarget">
							<el-select :disabled="disabled" v-model="form.commonTarget" placeholder="请选择" size="large" style="width: 248px">
								<el-option v-for="dict in bus_common_target" :key="dict.value" :label="dict.label"
									:value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="常见发生月份" prop="commonOccurMonth1">
							<el-select :disabled="disabled" v-model="form.commonOccurMonth1" placeholder="请选择" size="large" multiple
							:collapse-tags="!disabled ? true : false" style="width: 248px">
								<el-option v-for="dict in bus_common_month" :key="dict.value" :label="dict.label"
									:value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="常见区域" prop="commonRegion1">
							<el-select :disabled="disabled" v-model="form.commonRegion1" placeholder="请选择" size="large" multiple
								:collapse-tags="!disabled ? true : false" style="width: 248px">
								<el-option v-for="dict in address" :key="dict.code" :label="dict.name"
									:value="dict.code" />
							</el-select>
						</el-form-item>
					</div>

				</div>
			</el-form>
		</el-scrollbar>
		<div class="text-center" v-if="!disabled">
			<el-button type="defaultBtn" @click="submitProduct('queryRef')" style="height: 38px;width: 88px;">
				确定
			</el-button>
			<el-button type="operate" style="width: 88px;height: 38px;" @click="resetQuery()">重置</el-button>
		</div>
	</el-dialog>
</template>
<script>
	import {
		addCrop, //添加作物
		getCrop, //详情
		updateCrop, //修改
	} from "@/api/business/product";
	import {
		getDivisions
	} from "@/api/business/opportunity"; //地址
	import {
		resetForm,
	} from '@/utils/ruoyi' //重置
	export default {
		data() {
			return {
				bus_crop_category:this.useDict('bus_crop_category').bus_crop_category, //作物类别
				bus_common_target:this.useDict('bus_common_target').bus_common_target, //常见靶标
				bus_common_month:this.useDict('bus_common_month').bus_common_month, //常见发生月份
				title: '',
				dialogVisible: false,
				disabled:'',
				form: {
					id: '',
					cropName: '', //作物名称
					cropCode: '', //作物编码
					cropCategory: '', //作物类别
					commonTarget: '', //常见靶标
					commonOccurMonth: '', //常见发生月份
					commonRegion: [], //常见发生区域
					commonOccurMonth1: '', //常见发生月份
					commonRegion1: [], //常见发生区域
				},
				rules: {
					cropName: [{
						required: true,
						message: '请输入作物名称',
						trigger: 'blur'
					}],
					commonTarget: [{
						required: true,
						message: '请选择常见靶标',
						trigger: 'change'
					}],
					commonOccurMonth1: [{
						required: true,
						message: '请选择常见发生月份',
						trigger: 'change'
					}],
					commonRegion1: [{
						required: true,
						message: '请选择常见发生区域',
						trigger: 'change'
					}],
				},
				address: [],
			}
		},
		created() {
			this.getAddress()
		},
		methods: {
			handleClose() {
				this.dialogVisible = false
			},
			open(num,disabled){
				this.disabled = disabled
				if(this.resetQuery()){
					if(num == ''){
						this.title = '新增作物'
					}else if(num !='' && !disabled){
						this.title = '编辑作物'
						this.form.id = num
						//获取详情
						this.getCrop()
					}else{
						this.title = '作物详情'
						this.form.id = num
						//获取详情
						this.getCrop()
					}
					this.dialogVisible = true
				}
			},
			// 查询地址
			getAddress() {
				let query = {
					type: 'provinces',
					pageNum: 1,
					pageSize: 5000
				}
				//查询接口
				getDivisions(query, query.type).then(res => {
					if (res.code == 200) {
						this.address = res.rows
					}
				})
			},
			closePage() {
				this.$tab.closePage();
			},
			// 重置
			resetQuery() {
				this.resetForm("queryRef");
				return true
			},
			// 详情
			getCrop() {
				getCrop(this.form.id).then(res => {
					this.form = res.data
					this.form.commonOccurMonth1 = res.data.commonOccurMonth.split(',')
					this.form.commonRegion1 = res.data.commonRegion.split(',')
				})
			},
			//添加
			submitProduct(formName) {
				console.log(this.form, 'form')
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 新增
						this.form.commonOccurMonth = this.form.commonOccurMonth1.length > 0 ? this.form
							.commonOccurMonth1.join(',') : ''
						this.form.commonRegion = this.form.commonRegion1.length > 0 ? this.form.commonRegion1.join(
							',') : ''
						if (this.form.id == '') {
							addCrop(this.form).then(response => {
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								setTimeout(() => {
									this.$router.go(-1)
								}, 1500)
							})
						} else {
							// 编辑
							updateCrop(this.form).then(response => {
								this.$message({
									message: '编辑成功',
									type: 'success'
								});
								setTimeout(() => {
									this.$router.go(-1)
								}, 1500)
							})
						}
					} else {
						return false;
					}
				});
			},

		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.shopImg {
		width: 110px;
		height: 110px;
	}
</style>